<template>
	<view>
		<view class="name">{{ info.name }}</view>
		<view class="progress">
			<view>
				<view :style="{ width: progress + '%' }" class="line"></view>
			</view>
			<text>{{ progress }}%</text>
		</view>

		<view class="collapse">
			<uni-collapse show-arrow show-animation v-model="collapse" ref="collapse">
				<view v-for="(item, index) in list" :key="index">
					<uni-collapse-item v-if="selectIndex >= index" :open="index == selectIndex && index != list.length - 1">
						<template #title>
							<view class="title-row">
								<view class="title">{{ item.title }}</view>
								<view>{{ item.selected !== '' ? item.options[item.selected].key : '' }}</view>
							</view>
						</template>
						<view class="cont">
							<view
								v-for="(item2, index2) in item.options"
								:key="index2"
								class="item"
								:class="{
									'active-item': item.selected === index2
								}"
								@click="select(index, index2)"
							>
								{{ item2.key }}
							</view>
						</view>
					</uni-collapse-item>
				</view>
			</uni-collapse>
		</view>

		<cover-view class="footer-btn" @click="toSubmit">马上估价</cover-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectIndex: 0,
			list: [],
			info: {
				id: 9,
				name: '--',
				maxmoney: '',
				backcate_id: 3,
				list: []
			},
			collapse: []
		};
	},
	computed: {
		// 进度计算
		progress: function () {
			const arr = this.list.filter((item) => item.selected !== '');
			const num = (arr?.length / this.info.list.length) * 100;
			return (num || 0).toFixed(2);
		}
	},
	onLoad(e) {
		this.getGoodsInfo(e.id);
		uni.setStorageSync('GoodsInfo', {});
	},
	methods: {
		// 获取分类商品
		async getGoodsInfo(id) {
			const data = await this.$api.request('/Backorder/getbackgoodbyid', 'POST', {
				id
			});
			this.info = data;
			this.list = data.list.map((item) => {
				return {
					...item,
					selected: ''
				};
			});
			// this.$nextTick(()=>{
			// 	this.collapse = ['0']
			// })
		},

		// 选择
		select(index, index2) {
			if (this.list[index].selected === '') {
				this.selectIndex++;
			}
			this.list[index].selected = index2;
			this.$nextTick(() => {
				this.collapse = [String(index + 1)];
			});
		},
		toSubmit() {
			let amount = parseFloat(this.info.maxmoney);
			this.list.map((item) => {
				if (item.selected !== '') {
					amount = amount - +item.options[item.selected].value;
				}
			});
			uni.setStorageSync('GoodsInfo', {
				...this.info,
				list: this.list,
				amount
			});
			uni.navigateTo({
				url: '/pages/recycle/submit'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.footer-btn {
	position: fixed;
	bottom: var(--window-bottom);
	margin: 30rpx;
	background-color: $main-color;
	color: #fff;
	width: 690rpx;
	padding: 25rpx;
	border-radius: 99rpx;
	text-align: center;
	z-index: 999999;
}

.collapse {
	padding-bottom: 300rpx;
	::v-deep.uni-collapse-item {
		margin-bottom: 20rpx;

		.uni-collapse-item__title {
			background-color: #efefef;
			margin: 0 30rpx;
			width: calc(100% - 60rpx);
			padding: 15rpx 0;
		}
	}

	.title-row {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		font-size: 30rpx;

		.title {
			font-size: 34rpx;
			// font-weight: 600;
		}
	}

	.cont {
		margin: 15rpx 40rpx;

		.item {
			border: 1rpx solid #efefef;
			text-align: center;
			padding: 15rpx 0;
			margin-bottom: 20rpx;
			font-size: 32rpx;
		}

		.active-item {
			background-color: #f5f5f5;
			border: 1rpx solid #f5f5f5;
		}
	}
}

.progress {
	margin: 20rpx 0;
	display: grid;
	grid-template-columns: 1fr 140rpx;
	font-size: 30rpx;
	font-weight: 600;
	column-gap: 15rpx;
	text-align: center;
	align-items: center;

	> view {
		background-color: #f5f5f5;
		height: 30rpx;

		.line {
			background-color: $main-color;
			width: 50%;
			height: 100%;
			transition: all 1s;
		}
	}
}

.name {
	background-color: #efefef;
	font-size: 32rpx;
	padding: 20rpx;
}
</style>
